<template>
  <div class="club-level-statistics-card">
    <div class="header">
      <span>俱乐部级别数据</span>
    </div>
    <div class="content">
      <div class="info">
        <span class="unit-line"></span>
        <div class="text">
          <span class="unit">获得级别的俱乐部总数/家</span>
          <span class="number">{{ number }}</span>
        </div>
      </div>
    </div>
    <div ref="ringChart" class="chart" id="Chart1"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getClubLevelData } from "@/api/statistics";

export default {
  data() {
    return {
      number: 0,
      chart: null,
      chartData: []
    };
  },
  async created() {
    await this.drawChart();
  },
  methods: {
    async drawChart() {
      try {
        const res = await getClubLevelData({ year: new Date().getFullYear() });
        if (res && res.data) {
          this.number = res.data.number;
          this.chartData = res.data.list;
          this.$nextTick(() => {
            this.initChart();
          });
        }
      } catch (error) {
        console.error("获取俱乐部等级数据失败:", error);
      }
    },
    initChart() {
      this.chart = echarts.init(document.getElementById("Chart1"));
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          right: 10,
          top: "center",
          data: this.chartData.map(item => item.name),
          itemGap: 20,
          formatter: name => {
            const item = this.chartData.find(item => item.name === name);
            return `${name}  ${item.value}`;
          }
        },
        series: [
          {
            name: "俱乐部级别",
            type: "pie",
            radius: ["35%", "50%"],
            center: ["35%", "50%"],
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "center",
              formatter: this.number.toLocaleString(),
              color: "#333",
              fontSize: 24,
              fontWeight: "bold"
            },
            labelLine: {
              show: false
            },
            data: this.chartData,
            itemStyle: {
              borderColor: "#fff",
              borderWidth: 2
            }
          }
        ]
      };
      this.chart.setOption(option);
      // 监听父元素大小变化
      const ro = new ResizeObserver(entries => {
        for (let entry of entries) {
          const cr = entry.contentRect;
          if (this.chart) {
            this.chart.resize();
          }
        }
      });
      ro.observe(Chart);
    }
  },
  beforeDestroy() {
    if (this.chart) {
      this.chart.dispose();
      this.chart = null;
    }
  }
};
</script>

<style scoped>
.club-level-statistics-card {
  width: 100%;
  background-color: #fff;
  border-radius: 8px;
}

.header {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #333;
}

.content {
  margin-bottom: 20px;
}

.info {
  display: flex;
  align-items: center;
  background-color: #f0f2f5;
  padding: 10px;
  border-radius: 4px;
}

.unit-line {
  display: inline-block;
  width: 4px;
  height: 40px;
  background-color: #409eff;
  margin-right: 8px;
}

.text {
  display: flex;
  flex-direction: column;
}

.unit {
  font-size: 14px;
  color: #999;
}

.number {
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.chart {
  width: 100%;
  height: 250px;
}
</style>
